<template>
  <div class="_wz_cent_main _wz_tallage">
    <Card dis-hover :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <div slot="extra">
        <Button type="info" size="small" v-if="!searchType" @click="searchType = true" icon="ios-arrow-down">更多</Button>
        <Button type="info" size="small" v-else @click="searchType = false" icon="ios-arrow-up">收起</Button>
      </div>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="车牌号">
          <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请填写车牌号" clearable />
        </FormItem>
        <FormItem label="车主业户">
          <i-input v-model="formDataSearch.ownerName" placeholder="请填写车主业户" clearable />
        </FormItem>
        <FormItem label="登记人" v-if="searchType">
          <i-input v-model="formDataSearch.registrantName" placeholder="请填写登记人" clearable />
        </FormItem>
        <FormItem label="到期日期" v-if="searchType">
          <DatePicker type="daterange" v-model="dateRange" placeholder="请选择到期日期" style="width:96%"></DatePicker>
        </FormItem>
        <FormItem label="到期状态" v-if="searchType">
          <i-select v-model="formDataSearch.expireState" filterable placeholder="请选择到期状态" clearable>
            <Option value="1">未到期</Option>
            <Option value="0">已到期</Option>
            <Option value="2">即将到期</Option>
          </i-select>
        </FormItem>
        <FormItem label="提醒状态" v-if="searchType">
          <i-select v-model="formDataSearch.whetherRemind" filterable placeholder="请选择提醒状态" clearable>
            <Option value="1">开启</Option>
            <Option value="0">关闭</Option>
          </i-select>
        </FormItem>

        <FormItem label="运输企业" v-if="searchType">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
        <Button type="success" @click="expireDerive">导出</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer :title="formTitle" v-model="formOperation" width="1000" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">车辆选择</p>
          <Row>
            <i-col span="8">
              <FormItem label="挂车车辆" prop="refTrailerUuid">
                <i-select v-model="formData.refTrailerUuid" filterable placeholder="请选择挂车车辆" clearable @on-change="refVehicleTrailerUuidFun" :label-in-value="true" :disabled="!!formData.id">
                  <Option v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.trailerPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <vehicleBriefly :vehicleBrieflyData="vehicleBrieflyData"></vehicleBriefly>
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">挂车税费信息</p>
          <Row>
            <i-col span="24">
              <i-col span="8">
                <FormItem label="车主业户" prop="trailerVesselTaxTrailerOwnerName">
                  <i-input v-model="formData.trailerVesselTaxTrailerOwnerName" placeholder="请填写车主业户" clearable />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="联系电话" prop="trailerVesselTaxTrailerOwnerPhone">
                  <i-input v-model="formData.trailerVesselTaxTrailerOwnerPhone" placeholder="请填写联系电话" clearable />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="登记人" prop="trailerVesselTaxRegistrantName">
                  <i-input v-model="formData.trailerVesselTaxRegistrantName" placeholder="请填写登记人" clearable />
                </FormItem>
              </i-col>
            </i-col>
            <i-col span="8">
              <FormItem label="办理日期" prop="wztrailerVesselTaxDate">
                <DatePicker type="date" v-model="formData.wztrailerVesselTaxDate" :options="trailerVesselTaxDate" placeholder="请选择办理日期" clearable @on-change="trailerVesselTaxDateFun"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="税费周期" prop="trailerVesselTaxCycle">
                <i-select v-model="formData.trailerVesselTaxCycle" filterable placeholder="请选择税费周期" clearable>
                  <Option value="12">12个月</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="到期日期" prop="wzTrailerVesselTaxExpireDate">
                <DatePicker type="date" v-model="formData.wzTrailerVesselTaxExpireDate" :options="trailerVesselTaxExpireDate" placeholder="请选择到期日期" clearable @on-change="trailerVesselTaxExpireDateFun"></DatePicker>
              </FormItem>
            </i-col>


            <i-col span="8">
              <FormItem label="提醒天数" prop="trailerVesselTaxRemindDay">
                <i-input v-model.number="formData.trailerVesselTaxRemindDay" placeholder="请填写提醒天数" clearable @on-change="wztrailerVesselTaxRemindDateFun"/>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="提醒日期" prop="wztrailerVesselTaxRemindDate">
                <DatePicker type="date" v-model="formData.wztrailerVesselTaxRemindDate" placeholder="请选择提醒日期" clearable ></DatePicker>
              </FormItem>
            </i-col>

            <i-col span="8">
              <FormItem label="提醒状态" prop="trailerVesselTaxWhetherRemind">
                <i-switch v-model.number="formData.trailerVesselTaxWhetherRemind" :false-value="0" :true-value="1">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="税费资料">
                <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="handleBeforeUpload" multiple>
                  <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                </Upload>
                <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">

                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in imgEntityList">
                    <div class="_wz_insertimage">
                      <img :src="!!item.trailerVesselTaxImgUrl?apiUrl.imgUrl+item.trailerVesselTaxImgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                      <div class="_wz_insertimage-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(apiUrl.imgUrl+item.trailerVesselTaxImgUrl)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="imgEntityListRemove(item,index)"></Icon>
                      </div>
                    </div>
                    <i-input v-model="item.trailerVesselTaxImgDescribe" placeholder="填写图片名称" @on-change="alterImgName(item)" clearable />
                  </div>

                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in defaultList">
                    <div class="_wz_insertimage">
                      <img :src="item" @error="public.imgDispose">
                      <div class="_wz_insertimage-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
                      </div>
                    </div>
                    <i-input v-model="nameList[index]" placeholder="填写图片名称" clearable />
                  </div>
                </div>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="备注" prop="trailerVesselTaxRemark">
                <i-input v-model="formData.trailerVesselTaxRemark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
        </div>
      </Form>
    </Drawer>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

    <Drawer title="详情" v-model="formDetails" width="1000" :draggable="true" :mask-closable="false" :styles="{'padding':'10px 10px 10px 10px'}">
      <tallageSee v-if="formDetails" :selectData="formDetailsData"></tallageSee>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

  import tallageSee from './tallageSee.vue'
  import vehicleBriefly from './vehicleBriefly.vue'
  import wzTbale from "../../../components/table/table";

  export default {
    components: {
      tallageSee,//挂车车船税详情
      vehicleBriefly,//车辆简述
      wzTbale,//列表
    },
    data() {
      return {
        spinShow:false,//本页加载
        searchType:false,//搜索条件
        uploadProgress: 0,//文件上传进度
        subDeptList: [],//运输企业
        dateRange: [],
        trailerVesselTaxDate: {},//办理时间
        trailerVesselTaxExpireDate: {},//到期日期
        vehicleBrieflyData: null,//车辆简述
        formDetailsData: {},//挂车车船税详情数据
        formDetails: false,//挂车车船税详情
        carList: [],//车和挂车List

        //缩略图
        visible: false,
        imgSrc: "",

        formDataSearch: {},//搜索表单数据

        formData: {
          trailerVesselTaxWhetherRemind:0,
          trailerVesselTaxTrailerOwnerName: '',//车主业户
          trailerVesselTaxTrailerOwnerPhone: ''//联系电话
        },//新增修改表单数据
        formOperation: false,//表单左侧移出
        formOperationStyles: {//表单左侧移出css
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },


        tableData: {
          url: this.apiUrl.webApi + "/management/trailerVesselTax/trailerVesselTaxPageList",//请求地址
          method: 'post',//请求方式
          where: {},//搜索条件
          height: 'auto',//表格高度 auto
          page: true,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '档案号', minWidth: 190, key: 'trailerVesselTaxRecordNumber'},
            {title: '车牌号', minWidth: 120, key: 'trailerVesselTaxTrailerPlateNo'},
            {title: '车主业户', minWidth: 120, key: 'trailerVesselTaxTrailerOwnerName'},
            {title: '联系电话', minWidth: 140, key: 'trailerVesselTaxTrailerOwnerPhone'},
            {title: '办理日期', minWidth: 120, key: 'trailerVesselTaxDate'},
            {
              title: '税费周期', minWidth: 120, render: (h, params) => {
                return h('span', params.row.trailerVesselTaxCycle + "个月");
              }
            },
            {title: '到期日期', minWidth: 120, key: 'trailerVesselTaxExpireDate'},
            {title: '登记人', minWidth: 120, key: 'trailerVesselTaxRegistrantName'},
            {title: '运输企业', minWidth: 260, key: 'deptName'},
            {
              title: '提醒状态', fixed: 'right', minWidth: 120, render: (h, params) => {
                return h('Tag', {
                  props: {
                    type: 'dot',
                    color: (params.row.trailerVesselTaxWhetherRemind == 0) ? "error" : "primary"
                  }
                }, (params.row.trailerVesselTaxWhetherRemind == 0) ? "关闭" :  "开启");
              }
            },
            {
              title: '到期状态', fixed: 'right', minWidth: 140, render: (h, params) => {
                return h('Tag', {
                  props: {
                    type: 'dot',
                    color: (params.row.trailerVesselTaxExpireState == 0) ? "error" : (params.row.trailerVesselTaxExpireState == 1) ? "success" : "warning"
                  }
                }, (params.row.trailerVesselTaxExpireState == 0) ? "已到期" : (params.row.trailerVesselTaxExpireState == 1) ? "未到期" : "即将到期");
              }
            },
            {
              title: '档案状态', fixed: 'right', minWidth: 120, render: (h, params) => {
                if(params.row.trailerVesselTaxState == 1){
                  return h('Tag', {props: {type: 'dot',color: "success"}},"正常");
                }else if(params.row.trailerVesselTaxState == 2){
                  return h('Tag', {props: {type: 'dot',color: "warning"}},"过户");
                }else if(params.row.trailerVesselTaxState == 3){
                  return h('Tag', {props: {type: 'dot',color: "error"}},"报废");
                }else{
                  return h('Tag', {props: {type: 'dot',color: "default"}},"未知");
                }
              }
            },

            {
              title: '操作', width: 120, fixed: 'right',
              render: (h, params) => {
                let operationButtons = [];
                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, '查看'))


                var buttonList = [];


                if(params.row.trailerVesselTaxWhetherRemind == 1){//关闭
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '关闭到期提醒',
                          content: '确定要关闭选中的到期提醒？',
                          onOk: () => {
                            this.remindState(params.row,0)
                          },
                          onCancel: () => {
                            //点击取消
                          }
                        });
                      }
                    }
                  }, '关闭'))
                }else if(params.row.trailerVesselTaxWhetherRemind == 0){//打开
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '打开到期提醒',
                          content: '确定要打开选中的到期提醒？',
                          onOk: () => {
                            this.remindState(params.row,1)
                          },
                          onCancel: () => {
                            //点击取消
                          }
                        });
                      }
                    }
                  }, '打开'))
                }

                //修改
                if (params.row.trailerVesselTaxState == 1) {
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        this.modifyTableData(params.row)
                      }
                    }
                  }, '修改'))
                }

                //删除
                buttonList.push(h('DropdownItem', {
                  nativeOn: {
                    click: () => {
                      this.removeTableFun(params.row)
                    }
                  }
                }, '删除'))

                if (buttonList.length > 0) {
                  operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
                  operationButtons.push(h('Dropdown', {props: {trigger: "hover", transfer: true}},
                    [
                      h('span', {style: {"color": "#2d8cf0", "cursor": "pointer"}}, '更多▼'),
                      h('DropdownMenu', {slot: "list"}, buttonList)
                    ])
                  )
                }
                return operationButtons;
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
            count: ['count'],//数据总量
          },
        },


        //验证
        ruleValidate: {
          refTrailerUuid: [
            {required: true, message: '请选择挂车车辆', trigger: 'blur'},
          ],
          wztrailerVesselTaxDate: [
            {type: "date", required: true, message: "请选择办理日期", trigger: "blur"}
          ],
          trailerVesselTaxCycle: [
            {required: true, message: "请选择税费周期", trigger: "blur"}
          ],
          wzTrailerVesselTaxExpireDate: [
            {type: "date", required: true, message: "请选择到期日期", trigger: "blur"}
          ],
          trailerVesselTaxRemindDay:[
            {type: 'number', required: true, message: '请填写提醒天数', trigger: 'blur'}
          ],
          wztrailerVesselTaxRemindDate: [
            {type: "date", required: true, message: "请选择提醒日期", trigger: "blur"}
          ],
          trailerVesselTaxRegistrantName: [
            {required: true, message: '请填写登记人', trigger: 'blur'},
          ],
          trailerVesselTaxTrailerOwnerName: [
            {required: true, message: '请填写车主业户', trigger: 'blur'},
          ],
          trailerVesselTaxTrailerOwnerPhone: [
            {required: true, message: '请填写联系电话', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
                  callBack()
                } else {
                  callBack('请输入手机号 或者 区号-座机号')
                }
              }, trigger: 'blur'
            }
          ],

        },
        formTitle: "",//表单名称
        defaultList: [],//图片展示数据
        defaultListData: [],//图片表单数据
        nameList: [],//图片名称
        imgEntityList: [],//多图回显数据
      }
    },
    computed: {//计算属性
      vehicle: function () {
        // 通过vuex的getters方法来获取state里面的数据
        return this.$store.getters.getVehicle;
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;
      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

      that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerList", {}).then(res => {
        if (!!res) {
          that.carList = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    methods: {//执行的方法
      //关闭 打开 提醒  whetherRemind   提醒状态（0：不提醒，1：数据提醒）
      remindState(data,type){
        var that = this;
        that.tableLoading = true;
        that.axios.post(that.apiUrl.webApi + "/management/trailerVesselTax/trailerVesselTaxCloseRemind",{uuid: data.uuid,whetherRemind:type}).then(res => {
          if (!!res) {
            that.$Message.info('操作成功');
            that.$refs.wzTbale.tableLoadData();
          }
        }).catch(err => {
          console.log("失败", err)
        })
      },
      addTableData() {//table添加
        let that = this;
        that.formTitle = "添加";
        that.defaultList = [];
        that.defaultListData = [];
        that.nameList = [];
        that.imgEntityList = [];//多图回显
        that.formData = {
          trailerVesselTaxRemindDay:90,
          trailerVesselTaxCycle: "12",
          trailerVesselTaxTrailerOwnerName: '',
          trailerVesselTaxTrailerOwnerPhone: '',
          trailerVesselTaxWhetherRemind:1,
          wztrailerVesselTaxDate:new Date(),
          wzTrailerVesselTaxExpireDate: "",
          trailerVesselTaxRegistrantName:JSON.parse(sessionStorage.getItem('loginData')).user.name,
          wztrailerVesselTaxRemindDate:'',
        };
        that.trailerVesselTaxDateFun(that.formData.wztrailerVesselTaxDate)

        that.wztrailerVesselTaxRemindDateFun();
        that.vehicleBrieflyData = null;//车辆简述
        that.formOperation = true;
      },
      modifyTableData(data) {//修改
        let that = this;
        that.formTitle = "修改";
        that.defaultList = [];
        that.defaultListData = [];
        that.nameList = [];

        var formData = JSON.parse(JSON.stringify(data));

        that.spinShow = true;
        that.axios.post(that.apiUrl.webApi + "/management/trailerVesselTax/trailerVesselTaxInfo", {uuid: data.uuid}).then(res => {
          that.spinShow = false;
          if (!!res) {
            formData = res.data.data;
            formData.trailerVesselTaxCycle = "12";

            let imgList = [];
            res.data.data.imgEntityList.forEach((k, i) => {
              k.imgUrl = that.apiUrl.imgUrl + k.trailerVesselTaxImgUrl;
              imgList.push(k);
            })

            that.imgEntityList = imgList;//res.data.data.imgEntityList;//多图回显
            formData.imgUpdateListStr = [];
            formData.imgDeleteIdListStr = [];

            //修改  办理日期
            formData.wztrailerVesselTaxDate = new Date(formData.trailerVesselTaxDate);
            formData.wzTrailerVesselTaxExpireDate = new Date(formData.trailerVesselTaxExpireDate);
            formData.wztrailerVesselTaxRemindDate = !!new Date(formData.trailerVesselTaxRemindDate)?new Date(formData.trailerVesselTaxRemindDate):'';



            //车辆简述
            that.vehicleBrieflyData = {
              modelType: 2,
              value: formData.refTrailerUuid
            };
            that.formData = formData;

            that.formOperation = true;
          }
        }).catch(err => {
          console.log("失败", err)
        })
      },
      removeTableFun(data) {//删除
        let that = this;
        that.$Modal.confirm({
          title: '删除提醒',
          content: '确定要删除选中的记录？',
          onOk: () => {
            that.spinShow = true;
            that.axios.post(that.apiUrl.webApi + "/management/trailerVesselTax/trailerVesselTaxDelete", {uuid: data.uuid}).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.$Message.success('删除成功');
                that.$refs.wzTbale.tableLoadData();
              }
            }).catch(err => {
              console.log("失败", err)
            })
          },
          onCancel: () => {
            //点击取消
          }
        });
      },
      searchSubmit() {//搜索
        this.formDataSearch.startDate = !!this.dateRange[0] ? this.public.timeFormatting(this.dateRange[0], "yyyy-MM-dd") : '';
        this.formDataSearch.endDate = !!this.dateRange[1] ? this.public.timeFormatting(this.dateRange[1], "yyyy-MM-dd") : '';
        this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
        this.$refs.wzTbale.tableLoadData(true);
      },
      addSubmit(name) {//新增修改提交
        let that = this;
        that.$refs[name].validate((valid) => {
          if (valid) {//正则判断使用
            let data = that.formData;


            //办理日期
            data.trailerVesselTaxDate = that.public.timeFormatting(data.wztrailerVesselTaxDate, "yyyy-MM-dd");
            data.trailerVesselTaxExpireDate = that.public.timeFormatting(data.wzTrailerVesselTaxExpireDate, "yyyy-MM-dd");
            data.trailerVesselTaxRemindDate = that.public.timeFormatting(data.wztrailerVesselTaxRemindDate, "yyyy-MM-dd");


            let formData = new FormData();

            //挂车车船税资料
            that.defaultListData.forEach(function (k, i) {
              let type = k.name.substr((k.name.lastIndexOf(".") + 1));
              formData.append('imgList', k, (that.nameList[i].length > 0 ? that.nameList[i] : '图片描述') + '.' + type);
            })

            if (!!data.imgUpdateListStr) {
              if (data.imgUpdateListStr instanceof Object) {
                data.imgUpdateListStr = JSON.stringify(data.imgUpdateListStr);
              }
            }

            //修改提交删除字段
            delete data.imgEntityList;


            for (let key in data) {
              //if (!!data[key]) {
                formData.append(key, data[key]);
             //}
            }

            that.axios.post(that.apiUrl.webApi + "/management/trailerVesselTax/trailerVesselTaxSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("保存成功");
                that.formOperation = false;
                that.$refs.wzTbale.tableLoadData();
              }
            }).catch(err => {
              console.log("失败", err)
            })
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },
      //缩略图查看
      handleView(src) {
        this.imgSrc = src;
        this.visible = true;
      },
      //挂车车船税资料
      handleBeforeUpload(file) {
        //新增的时候 处理图片数据
        //如果是文件  就展示文件名
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          this.defaultList.push(window.URL.createObjectURL(file));
          this.defaultListData.push(file);
          this.nameList.push("图片描述");
        } else {
          this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //挂车车船税资料删除
      handleRemove(file, index) {//新添加的图片删除
        this.defaultList.splice(index, 1);
        this.defaultListData.splice(index, 1);
        this.nameList.splice(index, 1);
      },
      //多图回显删除
      imgEntityListRemove(data, index) {
        this.formData.imgDeleteIdListStr.push(data.uuid);
        this.imgEntityList.splice(index, 1);
      },
      //回显图片备注被修改的时候
      alterImgName(data) {
        let that = this;
        let type = true;
        that.formData.imgUpdateListStr.forEach((k, i) => {
          if (k.uuid == data.uuid) {//存在相同数据
            k.trailerVesselTaxImgDescribe = (data.trailerVesselTaxImgDescribe.length > 0 ? data.trailerVesselTaxImgDescribe : "图片描述");
            type = false;
            return false;
          }
        })
        if (type) {
          that.formData.imgUpdateListStr.push({
            'uuid': data.uuid,
            trailerVesselTaxImgDescribe: (data.trailerVesselTaxImgDescribe.length > 0 ? data.trailerVesselTaxImgDescribe : "图片描述")
          });
        }
      },
      //车 挂车 详情
      refVehicleTrailerUuidFun(data) {
        data = !!data ? data : {};
        data.modelType = 2;
        this.vehicleBrieflyData = data;
      },
      //计算到期日期
      trailerVesselTaxDateFun(data) {
        let that = this;
        that.wztrailerVesselTaxRemindDateFun();
        that.trailerVesselTaxExpireDate = {
          disabledDate(endTime) {
            return endTime < new Date(data) //|| endTime > Date.now()
          }
        }
        // that.$nextTick(function () {
          let date = new Date(data);
          date.setFullYear(date.getFullYear() + 1);
          that.formData.wzTrailerVesselTaxExpireDate = date;
        // })

      },
      //到期时间
      trailerVesselTaxExpireDateFun(data) {
        let that = this;
        that.wztrailerVesselTaxRemindDateFun();
        that.trailerVesselTaxDate = {
          disabledDate(startTime) {
            return startTime > new Date(data) //|| startTime > Date.now()
          }
        }
      },
      //提醒时间
      wztrailerVesselTaxRemindDateFun(){
        var that = this;
        if (/^-?[1-9]\d*$/.test(that.formData.trailerVesselTaxRemindDay) && !!that.formData.wzTrailerVesselTaxExpireDate) {
          //确定 是数字 进行计算
          that.$nextTick(function () {
            that.formData.wztrailerVesselTaxRemindDate = new Date(new Date(that.formData.wzTrailerVesselTaxExpireDate).getTime() - parseInt(that.formData.trailerVesselTaxRemindDay) * 24 * 60 * 60 * 1000);
          })
        }else{
          that.formData.wztrailerVesselTaxRemindDate = '';
        }
      },
      //导出
      expireDerive() {
        let that = this;
        let formDataSearch = JSON.parse(JSON.stringify(this.formDataSearch));
        that.spinShow = true;
        that.axios.post(that.apiUrl.webApi + "/management/trailerVesselTax/trailerVesselTaxExport", formDataSearch).then(res => {
          that.spinShow = false;
          if (!!res) {
            window.open(that.apiUrl.imgUrl + res.data.data)
          }
        }).catch(err => {
          console.log("失败", err)
        })
      },
    },
    //到期不需要监听
    watch: {//监听
      vehicle(news, old) {
        if (!this.formData.id) {
          this.formData.trailerVesselTaxTrailerOwnerName = news.wzVehicleOwnerName;
          this.formData.trailerVesselTaxTrailerOwnerPhone = news.wzVehicleOwnerPhone;
        }
      }
    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_tallage {
    display: flex;
    flex-direction: column;
  }
</style>
